<template>
    <div class="container">
        <div class="pages" :style="{height:`${pdfHeight}px`}" v-for="(page,p) in dataList" :key="page.id">
            <div class="page-title" v-if="p===0">标题标题标题</div>
            <div class="item" v-for="(item,index) in page.children" :key="item.id">
                <div class="item-title" :style="{paddingTop:index===0?'0':'36px'}">
                    {{item.title}}</div>
                <div class="tabel">
                    <div class="th">
                        <div>对象类</div>
                        <div>尽调项</div>
                        <div>调查工时</div>
                        <div>尽调工作影响</div>
                        <div>配合工时</div>
                    </div>
                    <div class="tr" :id="`tr-${child.id}`" v-for="child in item.children" :key="child.id">
                        <div>{{child.name}}</div>
                        <div>{{child.text}}</div>
                        <div>{{child.hours}}</div>
                        <div>{{child.yx}}</div>
                        <div>{{child.hours1}}</div>
                    </div>
                </div>
            </div>
            <div class="page-num">{{(p+1).toString().padStart(2,'0')}}</div>
        </div>
    </div>
</template>

<script>
import { getUuid } from '@/utils'
export default {
    props: {
        pdfHeight: {
            type: Number,
            default: 1415
        }
    },
    data () {
        return {
            dataList: []
        }
    },
    mounted () {
        this.setDate()
    },
    methods: {
        setDate () {
            this.getData().then(res => {
                this.dataList = res
                this.$nextTick(() => {
                    this.sliceData()
                })
            })
        },
        getData () {
            const _this = this
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(_this.init())
                }, 1000)
            })
        },
        init () {
            let pages = []
            for (let p = 0; p < 1; p++) {
                let arr = []
                for (let i = 0; i < 4; i++) {
                    let arrItem = []
                    for (let j = 0; j < 5; j++) {
                        let obj = {
                            id: getUuid(),
                            name: (i + 1) + '变压器' + (j + 1),
                            text: j % 2 === 0 ? '观察低压及变压器柜体' : '观察低压及变压器变压器变压器变压器柜体等设观察低压及变压器变压器变压器变压器',
                            hours: '5小时20分钟',
                            yx: '影响租户能源供给',
                            hours1: '24小时30分钟'
                        }
                        arrItem.push(obj)
                    }
                    let o = {
                        id: getUuid(),
                        title: '专业' + (i + 1),
                        children: arrItem
                    }
                    arr.push(o)
                }
                const pConfig = {
                    id: getUuid(),
                    page: p + 1,
                    children: arr
                }
                pages.push(pConfig)
            }
            return pages
        },
        // 获取节点高度
        getHeight (id) {
            const node = document.getElementById(id)
            const { height = 0 } = node.getBoundingClientRect()
            return height
        },
        sliceData () {
            const pdfHeight = this.pdfHeight // pdf一页高度
            const titleHeight = 85 // 标题高度
            const thHeight = 38 // 表头高度
            let currentGroup = {} // 当前分组
            let newGroup = [] // 新分组

            // 获取列表每行元素高度
            this.dataList.forEach(x => {
                x.children.forEach(y => {
                    y.children.forEach(z => {
                        z.trHeight = this.getHeight(`tr-${z.id}`) // 表格每行高度
                    })
                })
            })

            // 递归处理每页数据
            const recursion = (page, x) => {
                let contentHeight = x === 0 ? titleHeight : 0 // 内容实际高度,第一页包含大标题
                for (let y = 0; y < page.children.length; y++) {
                    const group = page.children[y]
                    const itemTitleHeight = y === 0 ? 36 : 72 // 专业标题高度
                    contentHeight += (itemTitleHeight + thHeight) // 专业标题+表头
                    let allowBreak = false // 允许跳出循环
                    for (let z = 0; z < group.children.length; z++) {
                        const trItem = group.children[z]
                        contentHeight += trItem.trHeight // 表格每行高度
                        if (contentHeight >= (pdfHeight - 120)) { // 内容高度超出pdf一页高度,120是上下内边距之和
                            contentHeight = 0
                            currentGroup = JSON.parse(JSON.stringify(group))// 将此专业剩下部分放到下一页
                            currentGroup.id = getUuid()
                            currentGroup.children = group.children.slice(z)// 将剩余部分放在下一个新专业
                            group.children.splice(z, group.children.length - z)// 将剩余部分删除
                            const arr = page.children.slice(y + 1) // 当页剩余专业
                            newGroup = [currentGroup, ...arr] // 下一页的所有分组
                            page.children.splice(y + 1, page.children.length - y)// 删除当页剩余分组
                            allowBreak = true
                            break
                        }
                    }
                    if (allowBreak) break
                }
                if (newGroup.length) {
                    let p = {
                        page: page.page + 1,
                        children: newGroup
                    }
                    this.dataList.push(p)
                    newGroup = []
                }
                if (x !== this.dataList.length - 1) recursion(this.dataList[x + 1], x + 1)
            }
            recursion(this.dataList[0], 0)
            this.dataList.forEach(item => {
                const i = item.children.findIndex(x => x.children.length === 0)
                if (i > -1) {
                    item.children.splice(i, 1)// 删除没有子节点的分组
                }
            })
        }
    }
}
</script>
<style lang='less' scoped>
.container {
    width: 100%;

    .pages {
        padding: 60px;
        // height: 1415px;
        position: relative;

        .page-title {
            padding-bottom: 40px;
            box-sizing: border-box;
            font-weight: 700;
            font-size: 30px;
            color: #2e3742;
        }

        .item {
            .item-title {
                padding: 36px 0 12px;
                box-sizing: border-box;
                font-weight: 700;
                font-size: 16px;
            }

            .tabel {
                // margin: 12px 0 36px;

                .th,
                .tr {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    padding: 0 16px;
                    box-sizing: border-box;

                    div {
                        width: 33%;
                        padding: 0 5px;
                    }
                }

                .th {
                    height: 38px;
                    background: #edf1f5;
                    color: #626c78;
                }

                .tr {
                    padding: 13px 16px;
                    border-bottom: 1px solid #c4c9cf;
                    box-sizing: border-box;
                }
            }
        }

        .page-num {
            position: absolute;
            right: 18px;
            bottom: 18px;
        }
    }
}
</style>
